<template>
  <div>
    <van-nav-bar @click-left="$router.push('/index')">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
      <template #title>
        <van-search v-model="keyword" placeholder="请输入搜索关键词" />
      </template>
      <template #right>
        <p @click="search">{{ keyword != "" ? "搜索" : "取消" }}</p>
      </template>
    </van-nav-bar>
    <div class="box">
      <div class="box-item">
        <h3>搜索历史</h3>
        <van-icon name="delete-o" size="25" @click="list = ''" />
      </div>
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div class="item-list">
      <div v-if="list != '' && arr1 != ''">
        <div
          class="text"
          v-for="(item, index) in arr1"
          :key="index"
          @click="jusp(item)"
        >
          <div class="text-item">
            <h1>{{ item.title }}</h1>
            <p>{{ item.start_play_date }} | 共{{ item.sales_num }}课时</p>
            <div class="text-img">
              <img :src="item.teachers_list[0].teacher_avatar" alt="" />
              <p>{{ item.teachers_list[0].teacher_name }}</p>
            </div>
            <div class="num">
              <p>{{ item.browse_num }}人已报名</p>
              <span class="status" v-if="item.price == 0">免费</span>
              <span class="status" v-else>{{ item.price }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center">
        <img src="../../assets/lianx/empty.0d284c2e.png" alt="" />
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import { courseBasis } from "../../request/http";
export default {
  data() {
    return {
      keyword: "",
      list: [],
      arr: [],
      arr1: [],
      params: {
        page: 1,
        order_by: 0,
        course_type: 0,
        classify_id: 0,
        limit: 5,
      },
    };
  },
  methods: {
    search() {
      if (this.keyword != "") {
        console.log(this.keyword);
        this.list.push(this.keyword);
        console.log(this.list);
        this.arr1 = this.arr.filter((c) => {
          return c.title.includes(this.keyword);
        });
        console.log(this.arr1);
        this.keyword = "";
      } else {
        this.$router.push("/course");
      }
    },
    jusp(item) {
      this.$router.push({
        path: "/courceDetail",
        query: { id: item.id },
      });
    },
  },
  mounted() {
    courseBasis({ page: this.params.page, limit: this.params.limit }).then(
      (res) => {
        console.log(res);
        this.arr = res.data.list;
        this.finished = false;
      }
    );
  },
};
</script>

<style lang="scss" scoped>
.box {
  .box-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
  }
  ul {
    list-style: none;
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 100px;
      height: 40px;
      border: 1px solid black;
      text-align: center;
      line-height: 40px;
      margin: 10px 10px;
    }
  }
}
.item-list {
  .text {
    margin: 0 20px;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid black;
    .text-item {
      // background: white;/
      .text-img {
        display: flex;
        img {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 100%;
          margin-right: 0.267rem;
        }
      }
      .num {
        display: flex;
        justify-content: space-between;

        .status {
          color: #44a426;
          font-size: 0.427rem;
        }
      }
    }
  }
}
</style>